<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="标签 名称">
            <el-input v-model="form.courseTagName" :disabled="readOnly" />
        </el-form-item>
        <el-form-item label="父级 标签">
            <el-tree-select :disabled="form.courseTagParentId == null || readOnly" v-model="form.courseTagParentId"
                :data="parentTagList" node-key="courseTagId" check-strictly :props="parentTagListProps" />
        </el-form-item>
        <el-form-item label="标签 状态">
            <el-switch v-model="form.courseTagStatus"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;" :active-value=1 :inactive-value=0
                :disabled="readOnly" />
        </el-form-item>
        <el-form-item>
            <el-button v-if="readOnly" type="primary" @click="readOnly = false">修 改</el-button>
            <el-button v-if="!readOnly" type="primary" @click="onSave()">保 存</el-button>
            <el-button v-if="!readOnly" @click="clear()">返 回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { reactive, ref } from '@vue/reactivity';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    name: 'courseTagDetail',
    props: ['parentTagList', 'courseTagId'],
    setup(props) {
        const readOnly = ref(true);
        const oldForm = null;
        const form = reactive({
            courseTagId: ref(props.courseTagId),
            courseTagName: '',
            courseTagParentId: null,
            courseTagStatus: 1
        })

        const parentTagList = props.parentTagList;
        const parentTagListProps = {
            children: 'tagList',
            value: 'courseTagId',
            label: 'courseTagName'
        }

        return { form, parentTagList, parentTagListProps,readOnly,oldForm };
    },
    methods: {
        onSave() {
            //检查标签属性是否为空
            if (null == this.form.courseTagId || this.form.courseTagId < 0) {
                ElMessage.warning('标签id不能为空');
                return;
            }

            if (null == this.form.courseTagName || this.form.courseTagName == '') {
                ElMessage.warning('标签名称不能为空');
                return;
            }

            if (null == this.form.courseTagStatus || this.form.courseTagStatus < 0 || this.form.courseTagStatus > 1) {
                //检查标签状态是否为异常
                ElMessage.warning('标签状态异常');
                return;
            } else {
                //更新标签信息
                this.axios.put('/api/updateCourseTag', {
                    courseTagId: this.form.courseTagId,
                    courseTagName: this.form.courseTagName,
                    courseTagParentId: this.form.courseTagParentId,
                    courseTagStatus: this.form.courseTagStatus
                }).then((response)=>{
                    if(response.data.code==200){
                        ElMessage.success(response.data.msg);
                        this.readOnly = true;
                    }else{
                        ElMessage.warning(response.data.msg);
                    }
                }).catch(function(error){
                    console.log(error);
                })
            }
        },
        clear() {
            this.setFormData(this.oldForm);
            this.readOnly = true;
        },
        getCourseTagById() {
            if (null == this.form.courseTagId) {
                ElMessage.warning('标签id不能为空');
            } else {
                this.axios.get(`/api/selectCourseTagById?courseTagId=${this.form.courseTagId}`).then((response) => {
                    if (response.data.code == 200) {
                        this.oldForm = response.data.data;
                        this.setFormData(response.data.data)
                    } else {
                        ElMessage.warning(response.data.msg);
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            }
        },
        setFormData(data) {
            this.form.courseTagId = data.courseTagId;
            this.form.courseTagName = data.courseTagName;
            this.form.courseTagParentId = data.courseTagParentId;
            this.form.courseTagStatus = data.courseTagStatus;
        }
    },
    watch: {
        courseTagId: function (newId, oldId) {
            this.form.courseTagId = newId;
            this.readOnly = true;
            this.getCourseTagById();
        }
    },
    created() {
        this.getCourseTagById();
    }
}
</script>

<style>
</style>